<template>
    <div class="shoppingCar">
      <div class="car">
        <div class="car-title">
          <h3 class="font-22">购物车</h3>
          <p class="font-14 m15 col7">共1件商品</p>
          <span class="col19 font-16 clear-span">全部清空</span>
        </div>
<!--中间-->
        <div class="car-sort" v-for="item in thing">
          <div class="shop cart-list">
            <input type="checkbox" class="el-checkbox">
            <span class="font-16 pl10">西澳龙.面包蟹巴</span>
          </div>
          <div class="cart-list cart-listener">
            <div class="car-left">
              <input type="checkbox" class="el-checkbox">
              <a href="#">
                <div class="m10">
                  <img v-bind:src="item.img" alt="">
                  <div></div>
                  <span>{{item.time}}</span>
                </div>
                <div class="m10 dv2">
                  <h4 class="font-16 cola9 shop-name lighter">{{item.title}}</h4>
                  <div class="cola9 lh-31">
                    <span class="disinline font-14"> {{item.only}}/只</span>
                    <span class="disinline m20 font-14">{{item.box}}/千克/箱</span>
                  </div>
                  <p class="cola9">
                    <span class="font-22 f-500">￥{{item.onlyPrice}}</span>
                    <span class="font-14">/{{item.onlyWeight}}</span>
                  </p>
                  <div class="cola9 lh-31">
                    <span>￥{{item.manyPrice}}/箱</span>
                    <p class="send">起发量：{{item.launch}}箱</p>
                  </div>
                </div>
              </a>
            </div>
            <div class="car-center-1 tc">
              <template>
                <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字" style="width: 140px;"></el-input-number>
              </template>
            </div>
            <div class="car-center-2 tc">
              <p class="font-22">￥2908.23</p>
            </div>
            <div class="car-right tc">
              <span class="col19 font-16">移除</span>
            </div>
          </div>
        </div>
<!--底部-->
        <div class="car-bottom">
          <div class="freight-rule">
            <p class="flo-l">海外原包，同一商品不同产品规格，合并计算运费</p>
            <span class="flo-r">规则详情></span>
          </div>
          <div>
            <div class="flo-l">
              <input type="checkbox" class="el-checkbox">
              <p class="font-14 pl10 disinline">全选</p>
            </div>
            <div class="flo-r">
              <span class="addUp">合计</span>
              <p class="font-22 m15-l moneys">￥0.00</p>
              <el-row style="float: right; font-size: 18px;margin-left: 45px;">
                <el-button plain disabled>

                  <router-link to="/submit">去结算(0)</router-link>
                </el-button>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Shopping-car",
      data() {
        return {
          num1: 1,
          thing: [
            {
              img: require('../../assets/image/shop.jpg'),
              time: "08-03",
              title: "格莱 英国 蓝龙虾",
              only: "1500g+",
              box: "13",
              onlyPrice: "111.86",
              onlyWeight: "500g",
              manyPrice: "2908.23",
              launch: "30"
            }
          ]
        };
      },
      methods: {
        handleChange(value) {
          console.log(value);
        }
      }
    }
</script>

<style scoped>
  .shoppingCar {
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    min-height: 800px;
  }

  .car-title {
    position: relative;
  }

  .car-title h3 {
    font-weight: 700;
    line-height: 22px;
  }

  .car-title .clear-span {
    width: 120px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
  }

  .car-sort {
    margin-top: 32px;
  }

  .cart-listener {
    display: table;
    width: 100%;
  }

  .cart-listener div {
    display: table-cell;
    vertical-align: middle;
  }

  .car-left {
    width: 42%;
  }

  .car-left a div {
    display: inline-block;
    vertical-align: middle;
  }

  .car-left a div:nth-child(1){
    position: relative;
    width: 80px;
    height: 80px;
  }

  .car-left a div:nth-child(1) img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .car-left a div:nth-child(1) div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    opacity: .5;
    background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(#000));
    background-image: linear-gradient(-180deg,transparent,#000);
    height: 30px;
  }

  .car-left a div:nth-child(1) span {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-block;
    padding: 0 3px;
    font-size: 10px;
    background: #fff;
    border-radius: 2px;
    text-align: center;
    opacity: 1;
  }

  .car-left a .dv2{
    width: 300px;
  }

  .shop-name {
    height: 32px;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
  }

  .send {
    color: #777;
    display: inline-block;
    margin-left: 10px;
  }

  .car-bottom {
    font-size: 16px;
    border-top: 1px solid #eaebea;
    margin-top: 85px;
    padding: 20px 0;
    line-height: 48px;
  }

  .car-bottom .freight-rule {
    margin-bottom: 20px;
    cursor: pointer;
    padding: 15px 10px;
    font-size: 12px;
    background: #ffa219;
    color: #fff;
    line-height: 1.5em;
    height: 16px;
  }

  .addUp {
    color: #333;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
  }

  .moneys {
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
  }















  .flo-l {
    float: left;
  }

  .flo-r {
    float: right;
  }

  .car-center-1 {
    width: 26%;
  }

  .car-center-2 {
    width: 22%;
    color: #333;
  }

  .tc {
    text-align: center;
  }

  .cart-list {
    border-top: 1px solid #eaebea;
    padding: 20px 0;
  }

  .el-checkbox {
    cursor: pointer;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    outline: 0;
    line-height: 1;
    vertical-align: middle;
    border-color: #bfcbd9;
    border: 1px solid #bfcbd9;
    border-radius: 4px;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    background-color: #fff;
    z-index: 1;
    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
    background-color .25s cubic-bezier(.71,-.46,.29,1.46);
  }

  .disinline {
    display: inline-block;
  }

  .bolder{
    font-weight: bolder;
  }

  .f-500 {
    font-weight: 500;
  }

  .lighter{
    font-weight: lighter;
  }

  .col19 {
    color: #19a79a;
  }

  .font-22 {
    font-size: 22px;
  }

  .font-14 {
    font-size: 14px;
  }

  .font-16 {
    font-size: 16px;
  }

  .pl10 {
    padding-left: 10px;
  }

  .m20 {
    margin-left: 20px;
  }

  .m10 {
    margin-left: 10px;
  }

  .m15 {
    margin-top: 15px;
  }

  .m15-l {
    margin-left: 15px;
  }

  .col7 {
    color: #777;
  }

  .cola9 {
    color: #a9a9a9;
  }

  .lh-31 {
    line-height: 31px;
  }
</style>
